<template>
  <router-view v-slot="{ Component }">
    <transition :name="transitionName" appear>
      <multi-tab-store-consumer v-if="!parentCustomRouterView">
        <component :is="Component" v-if="Component"></component>
        <slot v-else></slot>
      </multi-tab-store-consumer>
      <template v-else>
        <component :is="Component" v-if="Component"></component>
        <slot v-else></slot>
      </template>
    </transition>
  </router-view>
</template>

<script lang="ts" setup>
import { inject, provide } from 'vue';
import { MultiTabStoreConsumer } from '@/components/multi-tab';
import { injectMenuState } from './use-menu-state';

const customRouterView = Symbol('custom-router-view');
const { transitionName } = injectMenuState();
// just use only once multi-tab-store-consumer
const parentCustomRouterView = inject(customRouterView, null);
provide(customRouterView, true);
</script>
